<template>
	<wsPage title="商户提现申请">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="申请状态">
							<Select clearable v-model="queryForm.status" placeholder="请选择" class="ws-form-select">
									<Option value="1">申请中</Option>
									<Option value="2">审核通过</Option>
									<Option value="3">审核失败</Option>
							</Select>
					</FormItem>
					<FormItem label="申请时间">
						<Row>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询开始时间" v-model="queryForm.searchStartTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			                <Col span="2" style="text-align: center">-</Col>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询结束时间" v-model="queryForm.searchEndTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			            </Row>      
			        </FormItem>
				</Form>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

		<!--审核弹框-->
		<wsModal v-model="auditModal.show" ok-text="审核" title="商户提现申请审核" @on-ok="auditModalOk" @on-cancel="auditModalCancel">
		    <Form ref="auditForm" :model="auditModal.form" :rules="auditModal.validate" :label-width="100">
		        <FormItem label="审核状态" prop="status">
		            <Select clearable v-model="auditModal.form.status" placeholder="请选择">
		                <Option value=2>通过</Option>
		                <Option value=3>驳回</Option>
		            </Select>
		        </FormItem>
						<FormItem label="备注" prop="memo">
		            <Input v-model="auditModal.form.memo"></Input>
		        </FormItem>
		    </Form>
		</wsModal>
	</wsPage>
</template>

<script>
	export default {
		data() {
			return {
				queryForm: {
					status: '',
					searchStartTime: '',
					searchEndTime: ''
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: '编号',
						key: 'sn',
	          			align: 'center'
					},
					// {
					// 	title: '商户名称',
					// 	key: 'tenantName',
	          		// 	align: 'center'
					// },
					{
						title: '银行名称',
						key: 'bank',
	          			align: 'center'
					},
					{
						title: '开户地址',
						key:'bankAddress',
						align:'center'
					},
					{	
						title: '支行名称',
						key: 'bankBranch',
	          			align: 'center'
					},
					{
						title: '账户类型',
						key: 'accountType',
	          			align: 'center',
						render: (h, params) => {
							return h('span',{

							},this.checkType(params.row.accountType))
						}
					},
					{
						title: '昵称',
						key: 'userName',
	          			align: 'center'
					},
					{
						title: '账户',
						key: 'accountNumber',
	         	 		align: 'center'
					},
					{
						title: '提现金额',
						key: 'money',
	          			align: 'center'
					},
					{
						title: '服务费',
						key: 'serviceCharge',
	          			align: 'center'
					},
					{
						title: '状态',
						key: 'status',
	          			align: 'center',
						render: (h, params) => {
							return h('Tag',{
								props: {
                        			type: 'border',
                        			color: params.row.status === 1 ? 'blue' : params.row.status === 2? 'green':'red'
                        		}
							},this.checkStatus(params.row.status))
						}
					},
					{
						title: '备注信息',
						key: 'memo',
	          			width: 200,
	          			align: 'center'
					},
					{
						title: '创建日期',
						key: 'createDate',
	          			width: 200,
	          			align: 'center'
					},
					{
						title: '操作',
						width: 100,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
							if(params.row.status === 1){
								return h('div', [h('Button', {
									props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
									on: {
										click: () => {
											this.auditModal.show = true;
											this.cleanForm();
											this.auditModal.form.id = params.row.id;
										}
									}
								},"审核")])
							}
						}
					}],

					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				//新增账号弹框
				auditModal: {
					show: false,
					form: {
						id: '',
						status: '',
						memo: ''
					},
					validate: {
						status: [
	                        { required: true, message: '请选择审核状态', trigger: 'blur' }
	                    ],
					}
				},
				clickSave: false
			}
		},
		computed: {

		},
		mounted() {
			this.init();
		},
		methods: {
			GMTToStr(time){
                let date = new Date(time)
                let Str=date.getFullYear() + '-' +
                  (date.getMonth() + 1) + '-' + 
                   date.getDate() + ' ' ;
                  // date.getHours() + ':' + 
                  // date.getMinutes() + ':' + 
                  // date.getSeconds()
                return Str
            },
			/**
			 * 判断账户类型
			 */
			checkType(accountType){
				if(accountType == 1) return '支付宝';
				if(accountType == 2) return '微信';
				if(accountType == 3) return '银联账户';
				if(accountType == 4) return '银行账户';
			},
			/**
			 * 判断状态
			 */
			checkStatus(status){
				if(status == 1) return '申请中';
				if(status == 2) return '审核通过';
				if(status == 3) return '审核失败';
			},

			//查询开始时间段必填
			dateConfirm(){
				let searchStartTime = this.queryForm.searchStartTime;
				let searchEndTime = this.queryForm.searchEndTime;
				if (searchStartTime != null ||searchStartTime != '') {
					searchEndTime = new Date();
				} else if (searchEndTime != null || searchEndTime !='') {
					searchStartTime = searchEndTime;
				}
			},

			init() {
				this.clickSave = false;
				this.query();
			},
			//刷新
			refresh(){
				this.queryForm.status = '';
				this.queryForm.searchStartTime = '';
				this.queryForm.searchEndTime = '';
				this.table.page.pageNum = 1;
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				let status = this.queryForm.status ? this.queryForm.status : 0;
				let searchStartTime = this.queryForm.searchStartTime ? this.GMTToStr(this.queryForm.searchStartTime) : '';
				let searchEndTime = this.queryForm.searchEndTime ? this.GMTToStr(this.queryForm.searchEndTime) : '';
				// console.log(searchStartTime);
				// searchStartTime = searchStartTime.getFullYear() + '-' + (searchStartTime.getMonth() + 1) + '-' + searchStartTime.getDate() + ' ' ;
				// searchEndTime = searchEndTime.getFullYear() + '-' + (searchEndTime.getMonth() + 1) + '-' + searchEndTime.getDate() + ' ' ;
				const _this = this;
				//this.axios.post('/ws/ops/merchantWithdrawRecords?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					
				this.axios.get('/ws/ops/withdraw/record/' + pageNum + '/' + pageSize + '?status='+ status+'&searchStartTime=' + searchStartTime + '&searchEndTime=' + searchEndTime).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 审核的弹框取消操作
			 */
			auditModalCancel() {
				this.$refs['auditForm'].resetFields();
				this.cleanForm();
				this.auditModal.show = false;
				this.clickSave = false;
			},
			/**
			 * 审核的弹框确认操作
			 */
			auditModalOk() {
				this.$refs['auditForm'].validate((valid) => {
					if (valid) {
						this.merchantAudit();
			        } else {
			            this.$Message.error('没有选择审核状态!');
			        }
               	});
			},
			/**
			 * 审核
			 */
			merchantAudit(){
				if(this.clickSave){
					this.$Message.warning('请不要重复点击');
					return;
				}
				this.clickSave = true;
				const _this = this;
				this.axios.put('/ws/ops/withdraw/record' , _this.auditModal.form).then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('审核成功');
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('审核失败:' + message_);
					}
					_this.$refs['auditForm'].resetFields();
					_this.auditModal.show = false;
					_this.init();
				});
			},
			cleanForm(){
				this.auditModal.form.id = '';
				this.auditModal.form.status = '';
				this.auditModal.form.memo = '';
			}


		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>
